<template>
	<view class="container">
		<view class="content-wrap">
			<view class="item" v-for="item in useDataResult.dataList">
				<text class="title">{{ item.activityName }}</text>
				<view class="number">
					<text class="total-num">建立机构：{{ item.agentName }}</text>
					<view class="info" @tap="toDetail(item.activityId)">查看</view>
				</view>
				<view class="number">
					<text class="time">活动时间：{{ item.startTime }} ~ {{item.endTime}}</text>
				</view>
			</view>
		</view>
		<gzListNull :list="useDataResult.dataList"></gzListNull>
	</view>
</template>

<script setup>
	import { $activityList } from '@/http/marketing/apiMarketing.js'
	import useGetList from '@/hooks/useGetList.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import storageManage from '@/util/storageManage.js'

	const { useDataResult, getList } = useGetList($activityList, data => data, {}, false)

	let flag = 0
	onLoad(({ flag:state }) => {
		if (state === '1') {
			uni.setNavigationBarTitle({
				title: '已结束活动'
			})
			flag = 1
		}else{
			flag = 0
		}
		uni.showLoading({
			title: '加载中'
		})
		getList({ agentNo: storageManage.userInfo().khjlAgentNo, flag }).then(res => { 
			uni.hideLoading()
		})
	})
	
	function toDetail(activityId) {
		uni.navigateTo({
			url: `/marketing/activity/detail?activityId=${activityId}&flag=${flag}`
		})
	}
</script>

<style lang="less">
	@page-backgroud: #F6F7FC; //页面背景色

	page {
		background: @page-backgroud;
	}

	.container {
		min-height: 100vh;
		padding: 30rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
		overflow: hidden;

		.content-wrap {
			width: 100%;
			position: relative;
			z-index: 0;

			.item {
				box-sizing: border-box;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;


				.no {
					font-size: 26rpx;
					color: #333333;
				}

				.line {
					height: 1rpx;
					background-color: #E6E6E6;
					margin: 20rpx 0rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					margin: 15rpx 0rpx;
				}

				.number {
					display: flex;
					align-items: center;
					color: darkgray;
					font-size: 26rpx;
					margin: 5rpx 0rpx;

					.total-num {
						flex-grow: 1;
					}

					.time {
						flex-grow: 1;
					}

					.info {
						border: 1rpx solid #24C789;
						border-radius: 35rpx;
						background-color: white;
						padding: 15rpx 30rpx;
						color: #24C789;
						box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
					}
				}

			}
		}
	}
</style>